<template>
	<div class="p-4 bg-[#F2F3F5] h-screen">
		<div class="text-center">
			<van-image width="150" height="150" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
		</div>
		<div class="mt-4">
			<van-cell-group>
				<van-cell title="手机号" :value="phone" />
				<van-cell title="退出登录" value="" @click="toLogout" />
			</van-cell-group>
		</div>
	</div>
</template>

<script setup>
import { onBeforeMount, ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";

const phone = ref("");
const router = useRouter();
const toLogout = () => {
	localStorage.removeItem("token");
	localStorage.removeItem("phone");
	router.push("/login");
};
onBeforeMount(() => {
	const token = localStorage.getItem("token");
	if (!token) {
		showToast({
			message: "请先登录",
			type: "fail",
		});
		router.push("/login");
	}
	phone.value = localStorage.getItem("phone");
});
</script>

<style scoped></style>
